<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
// import { NDataTable, NButton, NCard, NInput, NGrid, NGi, NGridItem, NFlex, NVirtualList, NDialogProvider, useDialog, createDiscreteApi, treeDark, NModal, NFormItem,NSpace } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import showForm from '@/components/show-form/index.vue'
import showTable from '@/components/show-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter } from 'vue-router';
import { showMsg } from '@/assets/utils/tools';
import type { StepsProps } from 'naive-ui'
import { FORM_ADD,FORM_SAVE } from '../../service/apis/from';
// import "../../assets/iconfont/demo_index";
// import {runScriptss }  from'../../assets/utils/mm'
// const { dialog } = createDiscreteApi(["dialog"])
const iframeSrc = ref('../../assets/iconfont/demo_index');
const stepRef = ref<any>(null)
const stepRef1 = ref<any>(null)
const stepRef2 = ref<any>(null)
const stepRef3 = ref<any>(null)
const stepRef4 = ref<any>(null)
const stepRef5 = ref<any>(null)
const stepCurrent = ref<any>(1)
const currentStatus = ref<StepsProps['status']>('process')


const transcript = ref('');
const contentBoxRef = ref(null)
const selectValue = ref<String>()
const inputValue = ref<String>()

const chatlist1 = ref<any>([
    // {
    //     id: 1,
    //     position: 'left',
    //     text: '嘻嘻嘻嘻'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'left',
    //     text: '嘻嘻嘻嘻'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'left',
    //     text: '嘻嘻嘻嘻'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // },
    // {
    //     id: 1,
    //     position: 'rigth',
    //     text: '哈哈哈哈哈哈'
    // }
])

const chatlist2 = ref<any>([])
const chatlist3 = ref<any>([])
const chatlist4 = ref<any>([])
const showModal = ref<Boolean>(false)
const options = ref([
    {
        label: '图标',
        value: '图标'
    },
    {
        label: 'star-kirby',
        value: 'star-kirby'
    },
    {
        label: '广东路',
        value: '广东路'
    },
]);
setTimeout(() => {
    chatlist1.value.push({
        id: 1,
        position: 'left',
        text: '我能有什么帮助你的？'
    })
}, 5000)

function send() {
    console.log(inputValue.value);

    if (stepCurrent.value == 1) {
        addContent(chatlist1.value)
    } else if (stepCurrent.value == 2) {
        addContent(chatlist2.value)
    } else if (stepCurrent.value == 3) {
        addContent(chatlist3.value)
    } else if (stepCurrent.value == 4) {
        addContent(chatlist4.value)
    }
    // debugger
    console.log(inputValue.value == '图标');

    if (inputValue.value == '@图标') {
        // showModal.value =true
        setTimeout(() => {
            showModal.value = true
        }, 6000)
    }


}

function handleUpdateValue(val: any) {
    console.log(val, stepRef.value);
    stepRef.value[0].scrollIntoView({ behavior: 'soomh', block: "start" })
}

function next() {

    if (stepCurrent.value == 5) {
        currentStatus.value = 'finish'
        return
    } else {
        stepCurrent.value++
        if (stepCurrent.value == 2) {
            setTimeout(() => {
                chatlist2.value.push({
                    id: 1,
                    position: 'left',
                    text: '我能有什么帮助你的？'
                })
            }, 5000)
        } else if (stepCurrent.value == 3) {
            setTimeout(() => {
                chatlist3.value.push({
                    id: 1,
                    position: 'left',
                    text: '我能有什么帮助你的？'
                })
            }, 5000)
        } else if (stepCurrent.value == 4) {
            setTimeout(() => {
                chatlist4.value.push({
                    id: 1,
                    position: 'left',
                    text: '我能有什么帮助你的？'
                })
            }, 5000)


        }

    }

}
function prev() {
    if (stepCurrent.value == 1) {
        currentStatus.value = 'process'
        return
    } else {
        stepCurrent.value--;
        currentStatus.value = 'process'
    }
}

function addContent(list: any) {


    if (inputValue.value == '' || inputValue.value == undefined) {
        showMsg('error', '请输入')
    } else {

        list.push({
            id: 1,
            position: 'right',
            text: inputValue.value
        })
        setTimeout(() => {
            list.push({
                id: 1,
                position: 'left',
                text: '返回一条信息'
            })
        }, 2000)

        // inputValue.value = ''
    }
}

function saveForm() {

    let data = {
        类型: "应用",
        内容: {
            应用名称: "质检应用",
            类型: "word",
            图标名: "icon",
            数据结构: [
                {
                    字段名称: "姓名",
                    类型: "字符串",
                    控件: "input",
                    默认值: 'none',
                    长度: [0, 0],
                    显示: "hidden"
                },
                // {
                //     "字段名称": "部门",
                //     "类型": "字符串",
                //     "控件": "select",
                //     "控件值": [
                //         {
                //             "value": "data1",
                //             "label": "data1"
                //         },
                //         {
                //             "value": "data2",
                //             "label": "data2"
                //         }
                //     ],
                //     "默认值": None,
                //     "长度": [0, 0],
                //     "显示": "show"
                // }
            ]
        }
    }



    FORM_ADD({ "params": JSON.stringify(data) }).then((res: any) => {
        console.log('结果', res);
        if (res.stacode == 200) {
        }
    }).catch((err: any) => {
        // console.log('err', err);
        // loading.value = false
    })
}
</script>
<template>
    <baseCard title="应用创建">
        <template #headers>
            <div style="border: 1px solid none;padding: 0 5px;">
                <n-steps ref="stepRef" :vertical="false" :current="stepCurrent" :status="currentStatus">
                        <n-step ref="stepRef1" title="创建应用"></n-step>
                        <n-step ref="stepRef2" title="设置呈现方式"> </n-step>
                        <n-step ref="stepRef3" title="定义数据内容"></n-step>
                        <n-step ref="stepRef4" title="设置应用图标"></n-step>
                        <n-step ref="stepRef5" title="保存提交创建应用"></n-step>
                    </n-steps>
            </div>
        </template>
        <div class="lay">
            <div class="lay_left" style="">
                <div class="scrollList" style="">

                    <showTable></showTable>

                    <button @click="saveForm">创建应用</button>
                </div>

            </div>
            <div class="lay_right" style="">

                <!-- <div class="lay_rigth_content"> :style="{textAlign:m.position}":style="{textAlign:m.position === 'left'? 'left':'right'}"-->
                <div class="scrollList">
                    <n-steps ref="stepRef" vertical :current="stepCurrent" :status="currentStatus">
                        <n-step ref="stepRef1" title="您好，创建应用，第一步先给应用起个名字吧">
                            <div class="box">
                                <div v-for="(m, n) in chatlist1" :key="n">
                                    <div v-if="m.position === 'left'" style="text-align:left;">
                                        <div style="display: flex;align-items: flex-start;">
                                            <img src="@/assets/image/icon/robot.png" alt=""
                                                style="height: 22px;width: 20px;border-radius: 50px;margin-right: 5px;">
                                            <span>{{ m.text }}</span>
                                        </div>
                                    </div>
                                    <div v-else style="text-align:right;">
                                        <div style="display: inline-flex;align-items: flex-start;">
                                            <span class="" style="margin-right: 5px;">{{ m.text }}</span>
                                            <img src="@/assets/image/icon/user.png" alt=""
                                                style="height: 20px;width: 20px;margin-left: 5px">
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </n-step>
                        <n-step ref="stepRef2" title="设置呈现方式">
                            <div class="box">
                                <div v-for="(m, n) in chatlist2" :key="n">
                                    <div v-if="m.position === 'left'" style="text-align:left;">
                                        <span class="iconfont icon-xingming_icon">{{ m.text }}</span>
                                    </div>
                                    <div v-else style="text-align:right;">
                                        <span class="">{{ m.text }}</span>
                                        <span class="iconfont icon-wodexiansuo"></span>
                                    </div>
                                </div>
                            </div>
                        </n-step>
                        <n-step ref="stepRef3" title="定义数据内容">
                            <div class="box">
                                <div v-for="(m, n) in chatlist3" :key="n">
                                    <div v-if="m.position === 'left'" style="text-align:left;">
                                        <span class="iconfont icon-xingming_icon">{{ m.text }}</span>
                                    </div>
                                    <div v-else style="text-align:right;">
                                        <span class="">{{ m.text }}</span>
                                        <span class="iconfont icon-wodexiansuo"></span>
                                    </div>
                                </div>
                            </div>
                        </n-step>
                        <n-step ref="stepRef4" title="设置应用图标">
                            <div class="box">
                                <div v-for="(m, n) in chatlist4" :key="n">
                                    <div v-if="m.position === 'left'" style="text-align:left;">
                                        <span class="iconfont icon-xingming_icon">{{ m.text }}</span>
                                    </div>
                                    <div v-else style="text-align:right;">
                                        <span class="">{{ m.text }}</span>
                                        <span class="iconfont icon-wodexiansuo"></span>
                                    </div>
                                </div>
                            </div>
                        </n-step>
                        <n-step ref="stepRef5" title="保存提交创建应用"></n-step>
                        <!-- <n-step ref="stepRef2" title="Something"
                            description="Something in the way she moves Attracts me like no other lover" /> -->
                        <!-- <n-step title="Let It Be"
                            description="When I find myself in times of trouble Mother Mary comes to me" />
                        <n-step title="Break" />
                        <n-step title="Come Together" description="Here come old flat top He come grooving up slowly" />
                        <n-step title="Something"
                            description="Something in the way she moves Attracts me like no other lover" />
                            <n-step title="Something"
                            description="Something in the way she moves Attracts me like no other lover" /> -->

                    </n-steps>
                </div>

                <!-- <template v-if="item.position === 'left'">
                        <div class="chat-name">{{ item.name }}</div><div class="chat-box">{{ item.content }}</div>
                    </template>
                    <template v-else>
                        <div class="chat-box">{{ item.content }}</div> <div class="chat-name">{{ item.name }}</div>
                    </template> -->
                <!-- </div> -->
                <div class="footer" style="">
                    <button @click="prev">前</button>
                    <button @click="next">后</button>
                    <button @click="handleUpdateValue">跳</button>
                    <button @click="handleUpdateValue">跳</button>
                    <n-mention :options="options" v-model:value="inputValue" default-value="@" placeholder="请输入" />
                    <!-- <n-select v-model:value="selectValue" :options="options" @update:value="handleUpdateValue" />
                    <n-input v-model:value="inputValue" type="text" placeholder="请输入"></n-input> -->
                    <n-button type="info" style="margin-left: 5px;" @click="send">发送</n-button>
                </div>
            </div>
        </div>
        <n-modal v-model:show="showModal" preset="card" title="图标库" :mask-closable="false" :close-on-esc="false"
            style="width: 80%;height: 0%">
            <template #header>
                <div>看看有喜欢的图标吗</div>
            </template>
            <div>
                <iframe src="http://192.168.0.3/iconfont/" style="height: 50vh;width: 100%;"></iframe>
            </div>
            <template #action>
                <!-- <div>操作</div> -->
            </template>
        </n-modal>
    </baseCard>
</template>

<style src="./index.scss" scoped></style>
<style lang="scss" scoped></style>
